<template>
  <div class="cart">
    <div v-if="carDataList.length >= 1">
      <div class="cart-item" v-for="item in cart" :key="item.id">
        <van-checkbox
          class="inp"
          v-model="item.checked"
          @change="ChangeChecked(item)"
        ></van-checkbox>
        <van-card
          class="cart-info"
          :price="item.price + '.00'"
          :title="item.name"
          :thumb="item.photos"
        >
          <template #desc>
            <van-stepper v-model="item.count" @change="ChangeCount(item)" />
          </template>
        </van-card>
      </div>
    </div>
    <div class="no_data" v-else><img src="../../../assets/img/no_datainfo.jpg" alt=""></div>

    <van-submit-bar :price="getCheckPrice * 100" button-text="提交订单">
      <van-checkbox v-model="checked" @change="ChangeAllChecked"
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      cart: state => state.cart.cart
    }),
    ...mapGetters({
      getCheckPrice: 'cart/getCheckPrice'
    }),
    getAllCheck: {
      get() {
        return this.$store.getters['cart/getAllChecked']
      },
      set() {

      }
    }
  },
  data() {
    return {
      checked: '',
      carDataList: []
    }
  },
  created() {
    this.checked = this.getAllCheck
    this.carDataList = JSON.parse(localStorage.getItem('cart') || '[]')
  },
  updated() {
    this.checked = this.getAllCheck
  },
  methods: {
    ChangeCount(item) {
      const Change = {
        name: item.name,
        count: item.count
      }
      this.$store.commit('cart/CHANGE_COUNT', Change)
    },
    ChangeChecked(item) {
      const Change = {
        name: item.name,
        checked: item.checked
      }
      this.$store.commit('cart/CHANGE_CHECKED', Change)
    },
    ChangeAllChecked() {
      const Change = this.checked
      this.$store.commit('cart/GET_ALLCHECK', Change)
    }
  }
}
</script>
<style lang="scss" scoped>
.cart-item {
  display: flex;
  align-items: center;
  background-color: #eee;
  border: 1px solid #666;
  margin: 10px 5px;
  .inp {
    display: flex;
    justify-content: center;
    flex: 0.5;
    width: 20px;
    height: 20px;
  }
  .cart-info {
    flex: 3;
  }
  .van-card__title {
    font-size: 18px;
  }
  .van-multi-ellipsis--l2 {
    overflow: visible;
  }
  .van-stepper {
    margin-top: 15px;
  }
  .van-card__price {
    color: red;
  }
}
.no_data{
  width: 100%;
  height:400px;
  img{
    height: 100%;
    margin-left: 75px;
  }
}
</style>